import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    TextInput,
    Image,
    FlatList,
    ScrollView,
    InteractionManager,
    Animated,
    TouchableOpacity, TouchableHighlight, ViewStyle, ImageBackground
} from 'react-native'
import {inject, observer} from "mobx-react";
import {Actions} from "react-native-router-flux";
import styles, {padding, rectWithSize, screenHeight, statusHeight} from "../../style";
import toast from "../../component/common/ToastProxy";
import {Store} from "../../store";
import {alertProxy} from "../../component/common/AlertProxy";
import {WechatShare} from "../../component/common/WechatProxy";
import FastImageCustom from "../../component/widget/FastImageCustom";
import FastImage from "react-native-fast-image";
import {apiUrl, baseUrl} from "../../config";

interface SharePageProps extends Store {
}

interface SharePageState {
    loaded: boolean
}

const background = require("../../assets/img/sharePageBackground.png");
@inject("user")
@observer
export default class SharePage extends Component<SharePageProps, SharePageState> {
    state = {
        loaded: false,

    };

    static onRight() {
        const wrapper: any = Actions.refs["SharePage"];
        const instance: SharePage = wrapper["wrappedInstance"];
        instance.openShare();
    }

    openShare = ()=> {
        WechatShare(this.props.user.user.id);
    };

    onLoadEnd = () => {
        this.setState({
            loaded: true
        })
    };

    componentDidMount() {
        this.props.user.getShareCode();
    }

    render() {
        return (
            <ImageBackground source={background} onLoadEnd={this.onLoadEnd}
                             style={[{backgroundColor: "#ccc"}, styles.flex]}>
                {this.state.loaded ? <View style={[SharePageStyles.content, styles.centerH]}>
                    <FastImage source={{
                        uri:apiUrl+`shareCode?userId=${this.props.user.user.id}`
                    }}
                           style={[rectWithSize(97), {backgroundColor: "#A6B4B7", marginVertical: 25}]}/>
                    <Text style={{fontSize: 14, color: "#fff"}}>我的邀请码:{this.props.user.user.shareCode}</Text>
                    <TouchableOpacity activeOpacity={.8} style={[styles.centered, {
                        marginTop: 25,
                        backgroundColor: "#A80008",
                        borderRadius: 23
                    }, padding(16, 88)]}>
                        <Text style={{color: "#fff", fontSize: 16}}>下载链接</Text>
                    </TouchableOpacity>
                </View> : null}
            </ImageBackground>
        )
    }
}


const SharePageStyles = StyleSheet.create({
    content: {
        position: "absolute",
        left: 0,
        right: 0,
        height: screenHeight - 360 - statusHeight,
        bottom: 0,
    }
});
